<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>

<jsp:include page="/common/front/head.jsp" flush="true"/>
	<link rel="stylesheet" href="static/plugs/editor.md/css/editormd.min.css" />
	<style>
	/* 代码高亮显示颜色 */
	.tag {color: rgb(25, 118, 116);text-shadow: 0 0 0.1px;}
	.atv,.str {color: rgb(42, 0, 255);text-shadow: 0 0 0.1px;}
	.kwd,.atn {color: rgb(127, 0, 85);text-shadow: 0 0 0.1px;}
	.com {color: #719682;}
	.editormd-html-preview pre.prettyprint, .editormd-preview-container pre.prettyprint {border: 1px solid rgb(226, 226, 226);background: #eeeeee;}
	.clo, .opn, .pun {color: rgb(127, 0, 85);text-shadow: 0 0 0.1px;}
	li.L1, li.L3, li.L5, li.L7, li.L9 {background: #e8e8e8;}
	.editormd-html-preview pre,.editormd-preview-container pre {-webkit-border-radius: 0px;-moz-border-radius: 0px;-ms-border-radius: 0px;-o-border-radius: 0px;border-radius: 0px}
	pre.prettyprint li:hover{background-color: rgba(33, 150, 243, 0.12); } /* 选中一行时 背景颜色改变 */
	</style>
	<div align="left" class="content mdl-shadow--2dp" style="background: #fff;margin:24px 0;max-width: 1084px;width:90%;">
		<div class="mdl-card__media mdl-color-text--grey-50" 
			style="background-image: url('${article.topimg}');"> 
		     <h4 style="min-height: 46px;font-size: 25px;line-height: 46px;" class="mdl-navigation__link articletitle">
		     	<a><i class="material-icons">&#x<c:if test="${article.type==1}">e870</c:if><c:if test="${article.type==2}">e8a7</c:if><c:if test="${article.type!=2&&article.type!=1}">e878</c:if>;</i>&nbsp;&nbsp;${article.title}</a>
				 <a class="mdl-navigation__link" style="position: relative;float: right;font-size: 25px;line-height: 46px;"><i class="material-icons"></i>&nbsp;&nbsp;${article.clicknum}</a> 
		     </h4> 
		</div>
		<div class="articletag" style="padding: 20px 20px;padding-bottom: 20px;background: #eee;">
			<i style='float: left;font-size: 20px;padding-right: 5px;' class="material-icons">&#xE89A;</i>
			<c:forEach var="t" items="${article.tagList}" varStatus="status">
				<a onclick="location.href='tag/${t.id}/${t.name}'"  style="background:rgb(238, 238, 238);" class="mdl-button mdl-js-button mdl-js-ripple-effect">${t.name}</a>
			</c:forEach>
			<div style="position: relative;float: right;"><i style='float: left;font-size: 20px;padding-right: 5px;' class="material-icons">&#xE1BD;</i><a style='text-decoration: none;' href="category/${article.categoryList[0].id}/${article.categoryList[0].name}">${article.categoryList[0].name}</a></div>
		</div>
		<hr style='margin: 0;border-top: 1px solid rgba(0,0,0,0.1);'>
		<div style="padding: 4%;">
			<div id="articlecontent" style="padding: 0px;">
	           	<textarea style="display:none;">${article.content}</textarea>
			</div>
		</div>
		<hr style='margin: 0;border-top: 1px solid rgba(0,0,0,0.1);'>
		<div style="padding: 4%;padding-bottom: 80px;">
			<h4><a>评论</a>&nbsp&nbsp<a onclick="replycommen(0,'发表评论',0)" style="cursor:pointer;font-size:12px;">点我评论</a></h4>
			<jsp:include page="../comment/commentList.jsp" flush="true"/>
		</div>
		<script src="static/plugs/editor.md/lib/marked.min.js"></script>
        <script src="static/plugs/editor.md/lib/prettify.min.js"></script>
	    <script src="static/plugs/editor.md/editormd.min.js"></script>
		<script type="text/javascript">
		$(function(){
			editormd.markdownToHTML("articlecontent", {
                htmlDecode      : "style,script,iframe",  // you can filter tags decode
                emoji           : true,
            });

		});
		</script>
   	</div>
<jsp:include page="/common/front/foot.jsp" flush="true"/>